<template>
    <div class="header">
      <div class="headerLeft">
        <div class="iconfont backicon">&#xe618;</div>
      </div>
      <div class="headerInput"><span class="iconfont">&#xe615;</span> 输入景点/游玩主题</div>
      <a href="/#/city">
      <div class="headerRight">
        <span class="city">城市</span>
        <div class="morecity">
          <span class="iconfont citymore">&#xe600;</span>
        </div>
      </div>
      </a>
    </div>
</template>

<script>
export default {
  name: 'homeheader'
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varible.styl';
  .header
    display: flex
    line-height: .86rem
    background-color : $bgcolor
    color: #fff
    .headerLeft
      width: .64rem
      float: left
      .backicon
        text-align : center
        font-size : .4rem
        margin-left :.1rem
        font-weight :600
    .headerInput
      flex: 1
      background : #fff
      color :#ccc
      line-height .64rem
      border-radius :.5rem
      margin-top :.12rem
      margin-bottom :.12rem
      margin-left :.2rem
      padding-left :.2rem
    .headerRight
      width: 1.24rem
      font-size :0.34rem
      float: right
      text-align :center
      margin-left :.2rem
      display :flex
      color :white
      .city
        padding-top: .05rem
      .citymore
        justify-content: center
        font-size :.44rem
      .morecity
         height:0.5rem
         width :0.5rem
         margin-top :.1rem
</style>
